//后台配置/数据录入

import React, { Component } from "react";
import { connect } from "dva";
import {
    Card,
    Cascader,
    Button,
    Input,
    Icon,
    Divider,
    Table,
    Pagination,
    InputNumber,
    Popconfirm,
    Form,
    DatePicker,
    Modal
} from "antd";
import Addmodal from './sub/Addmodal'
import style from "./DataEntry.less";
import moment from 'moment';

//引入字体图标组件
import MyIcon from "../../components/common/MyIcon";
import publicService from "../../services/PublicService";
import { AlarHistorypages } from "../../services/redmoe";
import request from "../../utils/request";
import { entryQuery,entryAdd,entryDelete,entryEditQuery,entryEdit,entryQueryTime} from "../../services/redmoe";
const { MonthPicker, RangePicker } = DatePicker;
const confirm = Modal.confirm;
class DataEntry extends Component {
    state = {
        loading: false,
        row: {},
        page:1,
        rows:10,
        rowCount:null,
        tableLoading:false,
        selectedRowKeys: [],
        RangePicker: null,
        startTime: "",
        endTime: "",
        ids:{},
        columns: [
            {
                title: "序号",
                dataIndex: "num",
                key: "num",
                align:'center'
            },
            {
                title: "日期",
                dataIndex: "date",
                key: "date",
                align:'center'
            },
            {
                title: "扬尘",
                dataIndex: "raiseDustValue",
                key: "raiseDustValue",
                align:'center'
            },
            {
                title: "异味",
                dataIndex: "peculiarSmellValue",
                key: "peculiarSmellValue",
                align:'center'
            },
            {
                title: "噪音",
                dataIndex: "noiseValue",
                key: "noiseValue",
                align:'center'
            },
            {
                title: "记录人",
                dataIndex: "person",
                key: "person",
                align:'center'
            },
            {
                title: "备注",
                dataIndex: "remarks",
                key: "remarks",
                align:'center'
            }
        ],
        data:[],
        visible: false
    };
    //页面进入事件
    componentDidMount() {
        let data = {
            page:1,
            rows:10
        };
        entryQuery({ ...data }).then(data => {
            console.log(data);
            if(data.data.rc == 0) {
                data.data.ret.forEach(item => {
                    item.date=moment(item.date).format("YYYY-MM-DD")
                })
                this.setState({
                    data:data.data.ret,
                    rowCount:data.data.total
                })
            }
        });
    }

    //日期选择事件
    RangePicker = (data, datastring) => {
        console.log(data);
        console.log(datastring[0]);
        this.setState({
            startTime: datastring[0],
            endTime: datastring[1],
            RangePicker: [data[0], data[1]]
        });
    };

    //多选
    onSelectChange = (selectedRowKeys, row) => {
        console.log(row)
        this.setState({
            row: row,
            selectedRowKeys
        });
    };
    //新增事件
    showModalAdd = () => {
        this.showModal()
        this.setState({
            ids:"新增"
        })
    }

    //模态框事件

    showModal = () => {
        this.setState({
          visible: true,
           
        });
      }
    
      handleOk = (e) => {
        console.log(e);
        this.setState({
          visible: false,
        });
      }
    
      handleCancel = (e) => {
        console.log(e);
        this.setState({
          visible: false,
        });
      }
//获取新增表单中的值 随后请求
handleCreate = () => {
    const form = this.formRef.props.form;
    form.validateFields((err, values) => {
        console.log(values)
      if(err){
          return
      }

      if(typeof this.state.ids == 'string') {
        //如果是新增就发请求
        let data = {
            date:moment(values.date).format("YYYY-MM-DD HH:mm:ss"),
            noiseValue:Number(values.noiseValue),
            peculiarSmellValue:Number(values.peculiarSmellValue),
            person:values.person,
            raiseDustValue:Number(values.raiseDustValue),
            remarks:values.remarks
          }
          entryAdd({...data}).then(data => {
              console.log(data)
              //成功后重新请求页面刷新
              if(data.data.rc == 0) {
    
                let data = {};
            entryQuery({ ...data }).then(data => {
                console.log(data);
                if(data.data.rc == 0) {
                    data.data.ret.forEach(item => {
                        item.date=moment(item.date).format("YYYY-MM-DD")
                    })
                    this.setState({
                        data:data.data.ret
                    })
                }
            });
    
              }
          })

      }

      if(typeof this.state.ids == 'object') {
          //如果是编辑就发请求
          console.log(values)
          var  id = this.state.row[0].id;
          let data = {
            date:moment(values.date).format("YYYY-MM-DD HH:mm:ss"),
            noiseValue:Number(values.noiseValue),
            peculiarSmellValue:Number(values.peculiarSmellValue),
            person:values.person,
            raiseDustValue:Number(values.raiseDustValue),
            remarks:values.remarks,
            id:id
          }
          entryEdit({...data}).then(data => {
              console.log(data)
              if(data.data.rc == 0) {

                let data = {};
                entryQuery({ ...data }).then(data => {
                    console.log(data);
                    if(data.data.rc == 0) {
                        data.data.ret.forEach(item => {
                            item.date=moment(item.date).format("YYYY-MM-DD")
                        })
                        this.setState({
                            data:data.data.ret
                        })
                    }
                });

              }
          })

      }




        form.resetFields();
        this.setState({ visible: false});
    });
};
      saveFormRef = formRef => {
        this.formRef = formRef;
    };
    handleCancel = () => {
        this.setState({ visible: false});
    };


        //删除按钮
        btnDelete = () => {

            var arr = [];
            if(this.state.row.length > 0) {
              this.state.row.forEach(item => {
                arr.push({
                  id:item.id
                })
              });
              console.log(arr)
              //删除按钮弹框
              confirm({
                text:this.state.text,
                title: '删除数据?',
                content: '点击确定后,数据将不存在',
                cancelText:'取消',
                okText:'确定',
                onOk: () => {
                    entryDelete(arr).then(data => {
                        if(data.data.rc == 0) {
                            //请求成功刷新页面
                            let data = {};
                            entryQuery({ ...data }).then(data => {
                                console.log(data);
                                if(data.data.rc == 0) {
                                    data.data.ret.forEach(item => {
                                        item.date=moment(item.date).format("YYYY-MM-DD")
                                    })
                                    this.setState({
                                        data:data.data.ret,
                                        selectedRowKeys:[]
                                    })
                                }
                            });
                        }

                    })
                }
               ,
                onCancel() {},
              });
      
            }
      
         
          
         
      
      
          }


          //编辑事件
          showModalEdit = () => {
            if(this.state.row.length == 1) {
                
                var  id = this.state.row[0].id;
                let data = {
                    id:id
                }
                entryEditQuery({...data}).then(data => {
                    console.log(data)
                    if(data.data.rc == 0) {
                        this.setState({
                            ids:data.data.ret
                        })
                        
                        setTimeout(() => {
                            this.showModal()
                        })
                        
                    }
                })
               
               
            }
          }

    //查询事件
    save = () => {
        console.log(this.state.startTime,this.state.endTime)
        let data = {
            startTime:`${this.state.startTime}`,
            endTime:`${this.state.endTime}`,
            page:this.state.page,
            rows:this.state.rows
        }
        entryQuery({ ...data }).then(data => {
            console.log(data);
            if(data.data.rc == 0) {
                data.data.ret.forEach(item => {
                    item.date=moment(item.date).format("YYYY-MM-DD")
                })
                this.setState({
                    data:data.data.ret,
                    rowCount:data.data.total
                })
            }
        });


    }

    //分页器事件
    onShowSizeChange = (page,rows) => {
        this.setState({
            page:page,
            rows:rows,
            tableLoading:true
        })

        setTimeout(() => {
            let data = {
                startTime: this.state.startTime == ""?"":`${this.state.startTime}`,
                endTime:this.state.endTime == ""?"":`${this.state.endTime}`,
                page:this.state.page,
                rows:this.state.rows
            }
            entryQuery({ ...data }).then(data => {
                console.log(data);
                if(data.data.rc == 0) {
                    data.data.ret.forEach(item => {
                        item.date=moment(item.date).format("YYYY-MM-DD")
                    })
                    this.setState({
                        data:data.data.ret,
                        tableLoading:false
                    })
                }
            });
        },100)



    }

    Pagination = (page,pageSize) => {
        console.log(page,pageSize)
        this.setState({
            page:page,
            rows:pageSize,
            tableLoading:true
        })

        setTimeout(() => {
            let data = {
                startTime: this.state.startTime == ""?"":`${this.state.startTime}`,
                endTime:this.state.endTime == ""?"":`${this.state.endTime}`,
                page:this.state.page,
                rows:this.state.rows
            }
            entryQuery({ ...data }).then(data => {
                console.log(data);
                if(data.data.rc == 0) {
                    data.data.ret.forEach(item => {
                        item.date=moment(item.date).format("YYYY-MM-DD")
                    })
                    this.setState({
                        data:data.data.ret,
                        tableLoading:false
                    })
                }
            });
        },100)

         

    }

    //重置事件

    reset = () => {
        this.setState({
            RangePicker:null,
            startTime: "",
            endTime: "",
            page:1
        })
        let data = {
            page:1,
            rows:10
        };
        entryQuery({ ...data }).then(data => {
            console.log(data);
            if(data.data.rc == 0) {
                data.data.ret.forEach(item => {
                    item.date=moment(item.date).format("YYYY-MM-DD")
                })
                this.setState({
                    data:data.data.ret
                })
            }
        });
    }


    render() {
        const { loading, selectedRowKeys } = this.state;

        let rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange.bind(this)
        };

        return (
            <div>
                <Addmodal
                    wrappedComponentRef={this.saveFormRef}
                    visible={this.state.visible}
                    onCancel={this.handleCancel}
                    onCreate={this.handleCreate}
                  
                    ids={this.state.ids}
                />
                <Card className={style.CardTop}>
                    <div className={style.Top}>
                        查询时间:{" "}
                        <RangePicker

                            showTime
                        size="small"
                        format="YYYY-MM-DD HH:mm:ss"
                            value={this.state.RangePicker}
                            allowClear={true}
                            onChange={this.RangePicker.bind(this.RangePicker)}
                            placeholder={["开始时间", "结束时间"]}
                            style={{ marginRight: 10 }}
                        />
                        <Button
                            className="ant-dropdown-link"
                            type="primary"
                            size="small"
                            style={{ marginRight: 10 }}
                            onClick={this.save}
                        >
                            查询
                        </Button>
                        <Button className="ant-dropdown-link" size="small"
                            onClick={this.reset}
                        >
                            重置
                        </Button>
                    </div>
                </Card>

                <Card
                    className={style.CardBottom}
                    bodyStyle={{ paddingTop: "10" }}
                >
                    <div>
                        <span
                            className={style.click_span}
                            type="primary"
                            onClick={this.showModalAdd}
                        >
                            <MyIcon
                                type="icon-xinzeng"
                                className={style.MyIcon_xinzeng}
                            />
                            新增
                        </span>
                        <Divider type="vertical" />

                        <span
                            className={style.click_span}
                            type="primary"
                            onClick={this.showModalEdit}
                        >
                            <MyIcon
                                type="icon-gongneng"
                                className={style.MyIcon_gongneng}
                            />
                            编辑
                        </span>
                        <Divider type="vertical" />
                        <span
                            className={style.click_span}
                            type="primary"
                            //删除按钮事件
                            onClick={this.btnDelete}
                        >
                            <MyIcon
                                type="icon-del"
                                className={style.MyIcon_del}
                            />
                            删除
                        </span>
                        <div className={style.myTable}>
                            <Table
                            ref="table"
                            loading={this.state.tableLoading}
                            style={{width:this.state.repairWidth,margin:0}}
                            onChange={this.rowSelection}
                            rowSelection={rowSelection}
                            columns={this.state.columns}
                            dataSource={publicService.transformArrayData(this.state.data,true,true) }
                            align="center"
                            className={style.Table}
                            bordered={true}
                            pagination={false}
                            size="small"
                        />
                        <Pagination
                            showSizeChanger
                            onShowSizeChange={this.onShowSizeChange}
                            showQuickJumper
                            defaultCurrent={1}
                            total={this.state.rowCount}
                            onChange={this.Pagination}
                            className={style.Pagination}
                            size="small"
                            current={this.state.page}
                        />
                        </div>
                    </div>
                </Card>
            </div>
        );
    }
}

export default connect()(DataEntry);
